import { Button, Table } from "antd";
import { ReactNode } from "react";
import type { TableProps } from "antd";

const getEleInfo = () => {
  const getElePaddingNumber = (ele: Element | null, type: string) => {
    if (ele) {
      const padding = +window
        .getComputedStyle(ele)
        .getPropertyValue(`padding-${type}`)
        .replace("px", "");
      return padding;
    } else {
      return 0;
    }
  };
  const getElePaddingPx = (ele: Element | null, type: string) => {
    if (ele) {
      const padding = window
        .getComputedStyle(ele)
        .getPropertyValue(`padding-${type}`);
      return padding;
    } else {
      return "";
    }
  };

  const getEleContentHeight = (ele: Element | null) => {
    if (ele) {
      const clientHeight = ele?.clientHeight || 0;
      return (
        clientHeight -
        getElePaddingNumber(ele, "top") -
        getElePaddingNumber(ele, "bottom")
      );
    } else {
      return 0;
    }
  };

  function getDistanceFromTop(element: HTMLElement) {
    let distance = element.offsetTop;
    while (element.offsetParent) {
      element = element?.offsetParent as HTMLElement;
      distance += element?.offsetTop;
    }
    return distance;
  }

  interface DataType {
    key: string;
    method: ReactNode;
    returnedValue: number | string;
  }

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "方法",
      dataIndex: "method",
      key: "method",
      //   render: (ele: Element) => ele,
    },
    {
      title: "返回值",
      dataIndex: "returnedValue",
      key: "returnedValue",
    },
  ];

  const data: DataType[] = [
    {
      key: "1",
      method: (
        <Button
          id="getElePaddingNumber"
          onClick={() => {
            alert(
              getElePaddingNumber(
                document.getElementById("getElePaddingNumber"),
                "top"
              )
            );
          }}
        >
          获取元素padding信息(返回数字)
        </Button>
      ),
      returnedValue: 32,
    },
    {
      key: "2",
      method: (
        <Button
          id="getElePaddingPx"
          onClick={() =>
            alert(
              getElePaddingPx(
                document.getElementById("getElePaddingNumber"),
                "top"
              )
            )
          }
        >
          获取元素padding信息(返回px)
        </Button>
      ),
      returnedValue: 42,
    },
    {
      key: "3",
      method: (
        <Button
          id="getEleContentHeight"
          onClick={() =>
            alert(
              getEleContentHeight(
                document.getElementById("getEleContentHeight")
              )
            )
          }
        >
          获取元素contentHeight
        </Button>
      ),
      returnedValue: 32,
    },
    {
      key: "4",
      method: (
        <Button
          id="getDistanceFromTop"
          onClick={() => {
            const ele = document.getElementById("getDistanceFromTop");
            if (ele) {
              alert(getDistanceFromTop(ele));
            }
          }}
        >
          获取元素距离文档顶部距离
        </Button>
      ),
      returnedValue: 32,
    },
  ];
  return <Table columns={columns} dataSource={data} />;
};

export default getEleInfo;
